<template>
  <el-dialog
    :visible.sync="visible"
    @close="onClose"
    title="考生监考报表"
    @closed="onClosed"
    width="700px"
    top="5vw"
    center
  >
    <table-filter>
      <el-button plain type="primary" @click="exportExcel">导出</el-button>
    </table-filter>
    <data-table ref="dtb" :api-setting="apiSetting" pagination index-column>
      <el-table-column
        fixed
        prop="userName"
        label="姓名"
        show-overflow-tooltip
      />
      <el-table-column
        prop="state"
        label="状态"
        width="120"
        show-overflow-tooltip
      >
        <template slot-scope="{ row: { state } }">
          <el-tag :type="examState[state].type" effect="dark">
            {{ examState[state].label }}
          </el-tag></template
        >
      </el-table-column>
      <el-table-column
        prop="score"
        label="得分"
        width="120"
        show-overflow-tooltip
      />
      <el-table-column
        prop="lastTime"
        label="交卷时间"
        width="120"
        show-overflow-tooltip
      >
        <template slot-scope="{ row }">
          <p v-if="row.lastTime">
            {{ row.lastTime | formatterDate }}
          </p>
          <p v-else>该考试未交卷</p>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="110"
        show-overflow-tooltip
      >
        <template slot-scope="{ row }">
          {{ row.createTime | formatterDate }}
        </template>
      </el-table-column>
    </data-table>
  </el-dialog>
</template>

<script>
import dialog from "../../mixins/component/dialog";
import examState from "../../mixins/business/examState";

export default {
  name: "reportForm",
  mixins: [dialog, examState],
  data() {
    return {
      apiSetting: {
        method: "post",
        url: "/sys/proctor/getUEILList",
        data: {
          examId: null
        }
      }
    };
  },
  methods: {
    setParams(params, reload = true) {
      Object.keys(params).map(key => {
        this.apiSetting.data[key] = params[key];
      });
      if (this.$refs.dtb && reload) {
        this.$refs.dtb.loadData();
        return;
      }
    },
    exportExcel() {
      this.downLoadFile(
        {
          method: "post",
          url: `/sys/proctor/exportUEILListExcel`,
          data: {
            cols:['userName','stateName','score','lastTime','createTime'],
            examId: this.apiSetting.data.examId
          }
        },
        "考试分析.xls"
      );
    },
    onClosed() {
      this.apiSetting.data.examId = null;
    }
  }
};
</script>

<style scoped></style>
